<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>舞动健康 - 选择地点类型</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            -webkit-tap-highlight-color: transparent;
        }
        
        body {
            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
            color: #333;
            background-color: #f8f8f8;
            font-size: 14px;
            line-height: 1.5;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .container {
            padding-bottom: 60px;
            min-height: 100vh;
        }
        
        /* 顶部导航 */
        .header {
            background-color: #41b883;
            color: #fff;
            display: flex;
            align-items: center;
            height: 44px;
            padding: 0 15px;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            z-index: 100;
            max-width: 750px;
            margin: 0 auto;
        }
        
        .back-btn {
            width: 30px;
            height: 30px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
        
        .back-icon {
            width: 12px;
            height: 12px;
            border-left: 2px solid #fff;
            border-bottom: 2px solid #fff;
            transform: rotate(45deg);
        }
        
        .header-title {
            flex: 1;
            text-align: center;
            font-size: 18px;
            font-weight: 500;
        }
        
        /* 内容 */
        .content {
            margin-top: 60px;
            padding: 15px;
        }
        
        .section-title {
            font-size: 16px;
            color: #666;
            margin-bottom: 15px;
        }
        
        .location-types {
            background-color: #fff;
            border-radius: 8px;
            overflow: hidden;
            box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
        }
        
        .location-item {
            display: flex;
            align-items: center;
            padding: 15px;
            border-bottom: 1px solid #f1f1f1;
        }
        
        .location-item:last-child {
            border-bottom: none;
        }
        
        .location-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            background-color: #f5f5f5;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 20px;
            color: #41b883;
        }
        
        .location-info {
            flex: 1;
        }
        
        .location-name {
            font-size: 16px;
            font-weight: 500;
            margin-bottom: 3px;
        }
        
        .location-desc {
            font-size: 13px;
            color: #999;
        }
        
        .radio-btn {
            width: 22px;
            height: 22px;
            border-radius: 50%;
            border: 1px solid #ddd;
            position: relative;
        }
        
        .location-item.active .radio-btn {
            border-color: #41b883;
        }
        
        .location-item.active .radio-btn::after {
            content: '';
            width: 14px;
            height: 14px;
            background-color: #41b883;
            border-radius: 50%;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
        
        /* 底部按钮 */
        .bottom-bar {
            position: fixed;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: #fff;
            display: flex;
            padding: 10px 15px;
            box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
            max-width: 750px;
            margin: 0 auto;
        }
        
        .btn {
            flex: 1;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 20px;
            font-size: 14px;
            background-color: #41b883;
            color: #fff;
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 顶部导航 -->
        <div class="header">
            <div class="back-btn" onclick="window.history.back()">
                <div class="back-icon"></div>
            </div>
            <div class="header-title">选择地点类型</div>
            <div style="width: 30px;"></div>
        </div>
        
        <!-- 内容 -->
        <div class="content">
            <div class="section-title">请选择上课地点类型</div>
            
            <div class="location-types">
                <div class="location-item active">
                    <div class="location-icon">🏠</div>
                    <div class="location-info">
                        <div class="location-name">我提供场地</div>
                        <div class="location-desc">我有场地，教练来我指定的位置授课</div>
                    </div>
                    <div class="radio-btn"></div>
                </div>
                
                <div class="location-item">
                    <div class="location-icon">🏢</div>
                    <div class="location-info">
                        <div class="location-name">教练提供场地</div>
                        <div class="location-desc">前往教练指定的场地上课</div>
                    </div>
                    <div class="radio-btn"></div>
                </div>
                
                <div class="location-item">
                    <div class="location-icon">🏪</div>
                    <div class="location-info">
                        <div class="location-name">使用合作场馆</div>
                        <div class="location-desc">在平台合作的场馆中选择一家</div>
                    </div>
                    <div class="radio-btn"></div>
                </div>
                
                <div class="location-item">
                    <div class="location-icon">💬</div>
                    <div class="location-info">
                        <div class="location-name">待定</div>
                        <div class="location-desc">与教练沟通后确定上课地点</div>
                    </div>
                    <div class="radio-btn"></div>
                </div>
            </div>
        </div>
        
        <!-- 底部按钮 -->
        <div class="bottom-bar">
            <div class="btn" onclick="window.history.back()">确认选择</div>
        </div>
    </div>
    
    <script>
        // 选项切换
        document.querySelectorAll('.location-item').forEach(item => {
            item.addEventListener('click', function() {
                document.querySelectorAll('.location-item').forEach(i => i.classList.remove('active'));
                this.classList.add('active');
            });
        });
    </script>
</body>
</html> 